<template>
  <div id="home">

    <el-container id="home_box">
      <el-aside :width="isCollapse ? '64px' : '200px'" class="aside">
        <el-menu
            :router="true"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="orange"
            :unique-opened="true"
            :collapse="isCollapse"
            :collapse-transition="false"
        >
          <div id="logo" @click="toggleCollapse">
            <img src="@/assets/kaixin.jpg" alt=""><br>
            <span>开心发财</span>
          </div>
          <!--二级菜单-->
          <el-submenu :index="'/'+item.id"
                      v-for="item in menuList"
                      :key="item.id">
            <template slot="title">
              <!--二级菜单的图标-->
              <i class="el-icon-message"></i>
              <!--二级菜单文字-->
              <span>{{ item.name }}</span>
            </template>
            <!--三级菜单-->
            <el-menu-item :index="'/'+subItem.path"
                          :key = "subItem.id"
                          v-for="subItem in item.children">
              <i class="el-icon-menu"></i>
              <span slot="title">{{ subItem.name }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>


      <el-container>
        <el-header>
          <el-tabs @tab-click="thisMenu" v-model="activeName">
            <el-tab-pane type="border-card" v-for="item in dataList.menuList" :key="item.id" :label="item.name" :name="item.id+''">

            </el-tab-pane>
            <div id="logout">
              <el-dropdown  @command="handleCommand">
                <el-avatar :size="30" :src="avatarImg" @error="errorHandler">
                  <img :src="avatarImg"/>
                </el-avatar>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <span style="color: black">{{ dataList.user.name }}</span>
            </div>

          </el-tabs>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      //用户头像
      avatarImg: '',
      //默认选中
      activeName: '1',
      dataList:{},
      //右侧菜单
      menuList:{},
      //一级菜单Id
      menuId: '1',
      // 是否折叠的标志
      isCollapse: false
    };
  },
  methods: {
    // 控制菜单展开和折叠
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    //选择一级菜单后的右侧菜单
    thisMenu(tab, event) {
      //获取一级菜单的id
      this.menuId = tab._props.name;
      const menuList = this.dataList.menuList;
      for(let i=0;i<menuList.length;i++) {
          if (menuList[i].id.toString() === this.menuId)
            this.menuList = menuList[i].children
      }
    },
    //退出登录
    handleCommand(command) {
      if(command === 'logout')
        sessionStorage.clear();
        this.$router.push("/login")
    },
    //头像展示失败
    errorHandler() {
      return true
    },
  },
  created() {
    //获取data数据
    const dataList = JSON.parse(sessionStorage.getItem('data'));
    this.dataList = dataList;

    //初始化右侧菜单对象
    const menuList = this.dataList.menuList;
    for(let i=0;i<menuList.length;i++) {
      if (menuList[i].id.toString() === this.menuId)
        this.menuList = menuList[i].children
    }

    //用户头像
    this.avatarImg = this.dataList.user.avatarImg
  }
}
</script>

<style scoped>
#logout {
  display:inline;
  float: right;
  font-size: 14px;
}
/*用户头像*/
.avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
#home {
    height: 100%;
  }
#home_box {
  height: 100%;
}
.aside {
  background-color: #545c64;
}
#logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 20px 0px;
}
span {
  color: whitesmoke;
  font-size: 20px;
  padding-left: 5px;
}
img {
  height: 90px;
  width: 90px;
  border-radius: 100%;
}

</style>